<template>
  <div class="container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题">
        <label>{{ form.name }}</label>
      </el-form-item>

      <!-- 遍历已创建的选项渲染 -->
      <div v-for="(item, index) in form.itemList" :key="index" class="item">
        <el-form-item :label="(index+1)+''">
          <div class="item_title">
            <span>、{{ typeMap[item.type] }}: </span>
            <span v-text="item.title" />
          </div>
          <div class="item_desc">
            <span v-text="item.desc" />
          </div>
          <!-- 单项填空 -->
          <div v-if="item.type==='input'">
            <el-input class="disabled" placeholder="禁止输入" disabled />
          </div>
          <!-- 单选 -->
          <div v-else-if="item.type==='radio'">
            <div v-for="(elm, i) in item.textList" :key="i" class="warp">
              <el-radio :label="(i+1)+'、'" />
              <el-input v-model="item.textList[i]" />
            </div>
          </div>

          <!-- 多选 -->
          <div v-else-if="item.type==='checkbox'">
            <div v-for="(elm, i) in item.textList" :key="i" class="warp">
              <el-checkbox :label="(i+1)+'、'" />
              <el-input v-model="item.textList[i]" />
            </div>
          </div>

          <!-- 选择填空 -->
          <div v-else-if="item.type === 'select'">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="(elm, i) in item.textList"
                :key="i"
                :label="item.textList[i]"
                :value="i+''"
              />
            </el-select>
          </div>

          <!-- 矩阵填空 -->
          <div v-else-if="item.type==='matrix'">
            <div v-for="(elm, i) in item.textList" :key="i" class="warp">
              <span> {{ item.textList[i] }}：</span>
              <el-input class="disabled" placeholder="禁止输入" disabled />
            </div>
          </div>
          <!-- 上移、下移、删除 -->
          <div style="margin-top: 10px">
            <el-button v-if="index!=0" @click="handleItem('up', item)">上移</el-button>
            <el-button v-if="index!=form.itemList.length-1" @click="handleItem('down', item)">下移</el-button>
            <el-button @click="handleItem('del', item)">删除</el-button>
            <el-button @click="edit(item, index)">编辑</el-button>
          </div>
        </el-form-item>
      </div>

      <!-- 添加选项 -->
      <el-form-item>
        <el-button @click="add('radio')">单选</el-button>
        <el-button @click="add('checkbox')">多选</el-button>
        <el-button @click="add('input')">单项填空</el-button>
        <!--        <el-button @click="add('select')">选择填空</el-button>-->
        <!--        <el-button @click="add('matrix')">矩阵填空</el-button>-->
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>

      <!-- 添加选项弹出框 -->
      <div class="additem">
        <el-dialog
          :title="typeMap[questItem.type]"
          :visible.sync="showItem"
          width="50%"
        >
          <el-form-item label="标题">
            <el-input v-model="itemTitle" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="itemDesc" />
          </el-form-item>
          <el-form-item v-show="questItem.type != 'input'" label="添加选项">
            <el-input-number v-model="num" :min="1" :max="10" @change="handleChange" />
          </el-form-item>
          <el-form-item v-for="(text, i) in itemText" v-show="questItem.type != 'input'" :key="i" label="选项">
            <el-input v-model="itemText[i]" />
          </el-form-item>
          <span slot="footer" class="dialog-footer">
            <el-button @click="clearItem">取 消</el-button>
            <el-button type="primary" @click="determine">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-form>
  </div>
</template>

<script>
import { voteItemUpdate, voteItemView } from '@/api/vote'
import { notifySuccess } from '@/utils/tool'

export default {
  data() {
    return {
      value: '',
      matrixsNum: 1,
      num: 5,
      voteId: this.$route.query.id,
      form: {
        itemList: [],
        name: ''
      },
      itemTitle: '',
      itemDesc: '说明：本问卷采取5级评分制，最大值为5，最小值为1，请各位同学认真填写。',
      itemText: ['A.5/满意', 'B.4/良好', 'C.3/一般', 'D.2/不满意', 'E.1/很差'],
      questItem: {},
      showItem: false,
      typeMap: {
        radio: '单选',
        checkbox: '多选',
        input: '问答',
        matrix: '矩阵问答',
        select: '选择'
      },
      editIndex: ''
    }
  },
  watch: {
    showItem() {
      if (!this.showItem) {
        this.clearItem()
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 初始化数据
    init() {
      voteItemView({ voteId: this.voteId }).then(response => {
        this.form.name = response.data.name
        this.form.itemList = response.data.itemList
      })
    },
    // 创建选项
    add(type) {
      this.questItem.type = type
      this.showItem = true
    },
    // 增加/减少 子选项
    handleChange(val) {
      this.itemText.length = val
    },
    // 确定将选项添加进列表中进行渲染
    determine() {
      if (this.questItem.type === 'input') {
        // 填空
        if (this.itemTitle === '') {
          this.$message('请输入选项的标题内容')
          return
        }
        if (this.editIndex !== '') {
          this.questItem.title = this.itemTitle
          this.questItem.desc = this.itemDesc
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.title = this.itemTitle
          this.questItem.desc = this.itemDesc
          this.form.itemList.push(this.questItem)
        }
        this.clearItem()
      } else if (this.questItem.type === 'radio' || this.questItem.type === 'checkbox' || this.questItem.type === 'matrix' || this.questItem.type === 'select') {
        // 单选、多选、矩阵
        if (this.itemTitle === '') {
          this.$message('请输入选项的标题内容')
          return
        }
        if (this.itemDesc === '') {
          this.$message('请输入说明内容')
          return
        }
        for (var i = 0; i < this.itemText.length; i++) {
          if (this.itemText[i] === '' || this.itemText[i] === undefined) {
            this.$message('请完整输入每个选项内容')
            return
          }
        }
        if (this.editIndex !== '') {
          this.questItem.title = this.itemTitle
          this.questItem.desc = this.itemDesc
          this.questItem.textList = this.itemText
          this.form.itemList.splice(this.editIndex, 1, this.questItem)
          this.editIndex = ''
        } else {
          this.questItem.title = this.itemTitle
          this.questItem.desc = this.itemDesc
          this.questItem.textList = this.itemText
          this.form.itemList.push(this.questItem)
        }
        this.clearItem()
      }
    },
    // 编辑
    edit(item, editIndex) {
      this.editIndex = editIndex
      if (item.type !== 'input') {
        this.num = item.textList.length
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
        this.itemDesc = item.desc
        this.itemText = []
        this.itemText.push(...item.textList)
      } else {
        this.showItem = true
        this.questItem = item
        this.itemTitle = item.title
        this.itemDesc = item.desc
      }
    },
    // 关闭弹窗，清空数据
    clearItem() {
      // this.num = 1
      this.itemTitle = ''
      // this.itemText = ['']
      this.questItem = {}
      this.showItem = false
    },
    // 判断上移、下移、删除
    handleItem(val, item) {
      switch (val) {
        case 'up':
          this.moveUp(item)
          break
        case 'down':
          this.moveDown(item)
          break
        case 'del':
          this.delItem(item)
          break
        default:
          throw new Error('该操作不存在！')
      }
    },
    // 上移
    moveUp(item) {
      const index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
      this.form.itemList.splice(index - 1, 0, item)
    },
    // 下移
    moveDown(item) {
      const index = this.form.itemList.indexOf(item)
      this.moveUp(this.form.itemList[index + 1])
    },
    // 删除
    delItem(item) {
      const index = this.form.itemList.indexOf(item)
      this.form.itemList.splice(index, 1)
    },
    // 提交
    onSubmit() {
      if (this.form.itemList.length === 0) {
        this.$message('至少添加一个选项')
        return
      }
      voteItemUpdate({ id: this.voteId, item: JSON.stringify(this.form.itemList) }).then(() => {
        this.dialogFormVisible = false
        notifySuccess(this, '修改成功')
        this.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .warp{
    display: flex;
    align-items: center
  }
  .disabled{
    background: #F5F7FA
  }
  input{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    margin: 10px 0 0
  }
  .el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 0
  }
</style>
